import { Result, Row, Col, Statistic, Card, Table, Pagination, Image as AntdImage, Input } from "antd";
import { Button, Card as SemiCard, SplitButtonGroup, ButtonGroup, Form } from "@douyinfe/semi-ui";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";
import { useModel, Outlet, useLocation, history } from "umi";
const { Search } = Input;

const DiscountPackageOrdersPage = () => {
    const { imageBase64 } = useModel("global");
    const { UTCTimeToLocal } = useModel("global");
    const state = useReactive({
        dataLoading: false,
        pageSize: 0,
        page: 0,
    });

    const onSearch = () => {};
    return (
        <div>
            <div style={{ padding: 20, backgroundColor: "#F8F8F8" }}>
                <Row gutter={16}>
                    <Col span={6}>
                        <Card bordered={false} hoverable>
                            <Statistic
                                title="总售卖金额"
                                value={43580.28}
                                precision={2}
                                valueStyle={{
                                    color: "#cf1322",
                                }}
                                //   prefix={<ArrowUpOutlined />}
                                suffix="元"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card bordered={false} hoverable>
                            <Statistic
                                title="全部"
                                value={67}
                                precision={0}
                                valueStyle={{
                                    color: "#3f8600",
                                }}
                                //   prefix={<ArrowDownOutlined />}
                                suffix="套"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card bordered={false} hoverable>
                            <Statistic
                                title="已支付"
                                value={58}
                                precision={0}
                                valueStyle={{
                                    color: "#3f8600",
                                }}
                                //   prefix={<ArrowDownOutlined />}
                                suffix="套"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card bordered={false} hoverable>
                            <Statistic
                                title="未支付"
                                value={9}
                                precision={0}
                                valueStyle={{
                                    color: "#3f8600",
                                }}
                                //   prefix={<ArrowDownOutlined />}
                                suffix="套"
                            />
                        </Card>
                    </Col>
                </Row>
            </div>
            <div style={{ padding: 10, display: "flex", justifyContent: "space-between" }}>
                <Search
                    placeholder="请输入客户电话"
                    onSearch={onSearch}
                    style={{
                        width: 200,
                    }}
                />
                <ButtonGroup>
                    <Button>所有</Button>
                    <Button>待支付</Button>
                    <Button>待发货</Button>
                    <Button>待收货</Button>
                    <Button>已完结</Button>
                </ButtonGroup>
            </div>
            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="订单编号" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="套餐名称" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="套餐数量" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="套餐价格" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="创建时间" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (_ ? UTCTimeToLocal(_) : "")} />
                <Table.Column title="订单状态" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="订单客户" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="订单客户电话" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="分享客户" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="分享员工" dataIndex="ciName" key="ciName" align="left" />
            </Table>
            <div style={{ display: "flex", justifyContent: "space-between", height: 48, borderTop: "1px solid #ccc" }}>
                <div></div>
                <div style={{ marginTop: 12 }}>
                    <Pagination
                        total={state.totalCount}
                        showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                        pageSize={state.pageSize}
                        current={state.page}
                        showSizeChanger={false}
                        onChange={(page) => (state.page = page)}
                    />
                </div>
            </div>
        </div>
    );
};

export default DiscountPackageOrdersPage;
